<template>
  <tab-bar>
    <tab-bar-item v-for="(item, index) in tabbar" :key="item.id" :path="item.path">
      <template v-slot:icon>
        <!-- vant的徽章默认让它在第三个显示 -->
        <van-badge :content="$store.state.cart.cartCount" :max="20" v-if="index === 2">
          <span class="iconfont" :class="item.icon"></span>
        </van-badge>
        <span class="iconfont" :class="item.icon" v-else></span>
      </template>
      <template v-slot:text>
        <span>{{ item.item }}</span>
      </template>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
import Home from 'views/home/Home.vue'
import TabBar from 'components/common/tabbar/TabBar.vue'
import TabBarItem from 'components/common/tabbar/TabBarItem.vue'
export default {
  nama: 'MainTabBar',
  components: { Home, TabBar, TabBarItem },
  setup() {
    // 商品种类数量
    let tabbar = [
      { id: '001', item: '首页', icon: 'icon-shouye', path: '/home' },
      {
        id: '002',
        item: '分类',
        icon: 'icon-leimupinleifenleileibie2',
        path: '/category'
      },
      { id: '003', item: '购物车', icon: 'icon-gouwuche', path: '/shopcart' },
      {
        id: '004',
        item: '个人中心',
        icon: 'icon-wode',
        path: '/profile'
      }
    ]
    return {
      tabbar
    }
  }
}
</script>

<style lang="scss" scoped>
</style>